<template>
    <div class="job-center">
        <mt-header fixed>
             <router-link to="/homepage" slot="left">
             <mt-button icon="back">家政求职</mt-button>
  <mt-button icon="more" slot="right"></mt-button>
              </router-link>
        </mt-header>
        <!-- 表头 -->
    <!-- <mt-header>
</mt-header> -->
 <div class="main-conter">
     <div class="main-one">
         <span class="icn"></span>
       <h3 class="text">
        做家政
       </h3>
     </div>
     <!-- 表单 -->
     <van-form validate-first ref='formRef' @submit="onSubmit">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
    v-model.trim="questList.username"
    label="*姓名："
    name="username"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model.trim="questList.phone"
    label="*电话号码："
    name="validator"
    :rules="[{ validator, message: '请输入正确内容' }]"
  />

    <div class="yixiang">
      <p class="text-yixiang">*意向岗位：</p>
     <div class="fis-btn">
     <div class="btn-class" v-for="(item, index) in creatList" :key="index" @click="cutTabClick($event,index)">{{item.profession}}</div>
     <!-- <van-button plain type="info" size='small' round>育婴师</van-button>
     <van-button plain type="info" size='small' round>朴素按钮</van-button>
      <van-button plain type="info" size='small' round>朴素按钮</van-button>
       <van-button plain type="info" size='small' round>朴素按钮</van-button> -->
     </div>
    </div>

    <div class="yihuo">
      <p class="rit-yihuo">
        *已获证书：</p>
     <div class="fis-lass" v-for="(item2, index) in creatListfor" :key="index">
     <div class="btn-lass" @click="cutOutClick($event,index)">{{item2.certificate}}</div>
     </div>
    </div>
  <van-field
    v-model.trim="questList.native"
    label="*籍贯："
    name="native"
    :rules="[{ required: true, message: '请填写籍贯' }]"
  />
  <van-field
  readonly
  clickable
  name="address"
  :value="value"
  label="*意向家政公司："
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
  </van-popup>
  <van-field
    v-model.trim="questList.address "
    label="*现居住地："
    name="address"
    :rules="[{ required: true, message: '请填写现居住地' }]"
  />
  <van-field
    v-model="questList.pattern"
    label="*备注信息："
    type="textarea"
    rows="4"
  />
  <van-button block type="info" class="round-info" native-type="submit" color='#3F51B5'>
      提交资料
    </van-button>
  </van-form>
 </div>
    </div>
</template>

<script>
import { jobGet, proGet, certiFi } from '@/api/job.js'
import { mapMutations } from 'vuex'
import { setItem, getItem } from '@/mock/calllist.js'
export default {
  name: 'jobCenter',
  created () {
    this.onFailedGet()
    this.creatfor()
  },
  methods: {
    ...mapMutations(['list']),
    // 证书
    async creatfor () {
      const { data } = await certiFi()
      console.log(data)
      this.creatListfor = data.data
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 职业页面一加载就渲染
    async onFailedGet () {
      const { data } = await proGet()
      console.log(data)
      this.creatList = data.data
      console.log(this.creatList)
    },
    // 点击 发送请求
    async onSubmit (values) {
      console.log('job', values)
      setItem('job', values)
      // 先校验
      try {
        await this.$refs.formRef.validate()
        console.log('验证通过')
      } catch (err) {
        return console.log('验证失败')
      }
      // 验证通过发送请求
      try {
        const { data } = await jobGet({
          option: values
        })
        console.log(data)
        this.list(data)
        console.log(this.$store.state.list)
        // 跳转
        this.$router.push('/homepage')
        // 提示成功
        this.$toast({
          message: '填写完成',
          iconClass: 'icon icon-success'
        })
      } catch (err) {
        console.log('获取失败', err)
      }
      //   const { data } = await jobGet({
      //     option: this.questList
      //   })
      //   console.log(data)
      //   this.list(data)
      //   console.log(this.$store.state.list)
      //   // /跳转
      //   this.$router.push('/homepage')
      //   // 提示成功
      //   this.$toast({
      //     message: '操作成功',
      //     iconClass: 'icon icon-success'
      //   })
      // })
    },
    //   } catch (err) {
    //   //   console.log('获取失败', err)
    //   // }
    // },
    // 校验
    validator (val) {
      return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(val);
    },
    // 意向高亮
    cutTabClick (e, index) {
      // this.actiove = index
      // console.log(this.actiove)
      // this.actiove = !this.actiove
      if (e.target.className === 3) {
        console.log('hhh')
      } else {
        if (e.target.className.indexOf('actiove') === -1) {
          e.target.className = 'btn-class actiove'
        } else {
          e.target.className = 'btn-class'
        }
      }
    },
    // 证件高亮
    cutOutClick (e, index) {
      if (e.target.className.indexOf('actiove') === -1) {
        e.target.className = 'btn-lass actiove'
      } else {
        e.target.className = 'btn-lass'
      }
    }
  },
  data () {
    return {
      // 提交数据
      questList: {
        username: '',
        phone: null,
        native: '',
        address: '',
        pattern: ''
      },
      creatList: [],
      creatListfor: [],
      // 先住址
      value: '',
      columns: ['赛维家政公司', '上析家政公司', '松雅家政公司', '安乔家政公司', '星达家政公司'],
      showPicker: false,
      // 高亮
      actiove: 0
    }
  }
}
</script>

<style lang="less" scoped>
.mint-header{
    display: flex;
    left: 0px;
    top: 0px;
    height: 120px;
    background-color: #1196db;
}
.mint-header .mint-button{
color: rgba(255, 255, 255, 100);
font-size: 32px;
text-align: left;
vertical-align: middle;
}
/deep/.mintui {
  font-size: 40px;
}
.main-conter{
  position: relative;
  top: 100px;
    z-index: 1;
background-color: #fff;
padding: 0px 10px;
margin: 0px 20px;
box-sizing: border-box;
border-radius: 30px;
}
.main-one{
    height: 104px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
.icn{
    display: inline-block;
    width: 8px;
    height: 24px;
    background-color:#1196db;
}
.text{
    display: inline-block;
    font-size: 28px;
    padding-left: 20px;
}
}
/deep/[data-v-4414c154] .van-field__label{
  // width: 250px;
  color: #000;
  margin: 0;
}
    .mt-btn{
        p {
            font-size: 28px;
            padding: 0px 10px;
        }
        border-bottom: 1px solid #F0EFEF;
    }
    /deep/.mint-cell-text{
        font-size: 28px;
    }
    /deep/.mint-popup-bottom {
    width: 300px;
    }
    ::deep[data-v-5d5a9732] .tabbar{
      display: none;
    }
    /deep/.mint-tabbar.is-fixed {
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    /* z-index: 1; */
    display: none !important;
}
    .round-info{
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 99999999;
      height: 98px;
      background-color: #1196db !important;
    }
    /deep/.van-field__label {
    width: 200px;
}
/deep/.van-button--info {
    border: 0.02667rem solid#1196db;
}
.van-field{
  color: #000;
}
.yixiang{
  padding: 0px 30px;
  border-bottom: 1px solid#F0EEEE;
  padding-bottom: 15px;
  height: 220px;
  .text-yixiang{
    font-size: 28px;
  }
  .fis-btn{
  float: left;
}
.btn-class{
  display: inline-block;
  padding: 10px 10px;
  float: left;
  font-size: 20px;
  border: 1px solid#3b3a3a;
  border-radius: 30px;
  margin: 10px 10px;
  color:#424141;
}
.actiove{
    background: #1196db !important;
    color: #fff;
  }
// /deep/.van-button {
//   height: 0px;
// }
}
/deep/.van-button--small{
    margin-right: 10px;
    margin-top: 15px;
}
/deep/.van-cell::after{
  border: 0px;
border-bottom: 1px solid #F0EEEE;
}
.yihuo{
  padding: 0px 30px;
  border-bottom: 1px solid#F0EEEE;
  padding-bottom: 15px;
  height: 220px;
  .rit-yihuo{
   font-size: 28px;
  }
   .fis-lass{
    float: left;
}
.btn-lass{
  display: inline-block;
  padding: 10px 10px;
  float: left;
  font-size: 20px;
  border: 1px solid#3b3a3a;
  border-radius: 30px;
  margin: 10px 10px;
  color:#424141;
 display: flex;
 justify-content: center;
  }
 .actiove{
    background:#1196db !important;
    color: #fff;
  }
}
// /deep/.van-button__text {
//     background-color: pink;
// }
/deep/[data-v-4414c154] [data-v-4414c154] .van-field__label {
    width: 210px;
    color: #000;
    margin: 0;
}
/deep/.van-field__label {
    width: 0px;
    color: #000;
    margin: 0;
}
</style>
